<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/head-common.css">
    <link rel="stylesheet" href="css/my-cart.css">

</head>

<body>
    <!-- 头部 -->
    <header>
        <!-- 头部logo -->
        <img class="logo-img" src="images/logo.png" alt="">

        <!-- head版心 -->
        <div class="head-c">
            <ul class="head-nav">
                <li class="head-list">
                    <a class="head-link link-a1" href="#">首页</a>
                </li>
                <li class="head-list">
                    <a class="head-link" href="#">女装</a>
                </li>
                <li class="head-list">
                    <a class="head-link" href="#">男装</a>
                </li>
                <li class="head-list">
                    <a class="head-link" href="#">箱包</a>
                </li>
                <li class="head-list">
                    <a class="head-link" href="#">配饰</a>
                </li>
            </ul>

            <!-- head搜索框  -->
            <div class="search">
                <input class="skk-input" type="text" placeholder="我的购物车">
                <span class="num">11</span>
                <a class="set-link" href="#">
                    <img class="set-img" src="images/设置.png" alt="">
                </a>

                <!-- 购物车弹窗 -->
                <div class="drop">
                    <div class="drop-list">
                        <img src="images/drop-cart.png" alt="">
                        <div class="drop-p">
                            <p>女装 高级轻型羽绒蓬松连帽外套 轻暖便携防水(短款)</p>
                            <p>尺码：S 颜色：米色</p>
                        </div>

                        <div class="drop-del">
                            <span class="ins">¥699<i>×1</i> </span>
                            <span class="del">删除</span>
                        </div>
                    </div>
                    <div class="drop-list">
                        <img src="images/drop-cart.png" alt="">
                        <div class="drop-p">
                            <p>女装 高级轻型羽绒蓬松连帽外套 轻暖便携防水(短款)</p>
                            <p>尺码：S 颜色：米色</p>
                        </div>

                        <div class="drop-del">
                            <span class="ins">¥699<i>×1</i> </span>
                            <span class="del">删除</span>
                        </div>
                    </div>
                    <div class="drop-list">
                        <img src="images/drop-cart.png" alt="">
                        <div class="drop-p">
                            <p>女装 高级轻型羽绒蓬松连帽外套 轻暖便携防水(短款)</p>
                            <p>尺码：S 颜色：米色</p>
                        </div>

                        <div class="drop-del">
                            <span class="ins">¥699<i>×1</i> </span>
                            <span class="del">删除</span>
                        </div>
                    </div>
                    <div class="drop-list">
                        <img src="images/drop-cart.png" alt="">
                        <div class="drop-p">
                            <p>女装 高级轻型羽绒蓬松连帽外套 轻暖便携防水(短款)</p>
                            <p>尺码：S 颜色：米色</p>
                        </div>

                        <div class="drop-del">
                            <span class="ins">¥699<i>×1</i> </span>
                            <span class="del">删除</span>
                        </div>
                    </div>

                    <div class="drop-complete">
                        <span class="piece">共<i>13</i>件商品</span>
                        <a class="check-cart" href="#">查看购物车</a>
                    </div>
                </div>

            </div>
        </div>
    </header>

    <!-- 内容区 -->
    <div class="container">
        <!-- 版心 -->
        <div class="content-c">
            <div class="content-hend">
                <input type="checkbox" class="check">
                <ul class="nav">
                    <li class="li1">商品信息</li>
                    <li class="li2">尺码/颜色</li>
                    <li class="li3">价格</li>
                    <li class="li4">数量</li>
                    <li class="li5">小计</li>
                    <li class="li6">操作</li>
                </ul>

            </div>

            <!-- 购物车列表 -->
            <div class="message-list">
                <input class="list-check" type="checkbox" checked name="commodity">
                <img src="images/位图.png" alt="">
                <div class="message-p">
                    <p class="p1">【设计师合作款】女装 +J 双面呢大衣(外套) 446355</p>
                    <p class="p2">支持30天无理由退换货</p>
                </div>

                <div class="guise">
                    <p>尺码：155/80A/S</p>
                    <p>颜色：69 藏青色</p>
                </div>

                <div class="message-price">
                    <p>¥1699.00</p>
                </div>

                <div class="amount">
                    <img class="plus-img" src="images/加.png" alt="">
                    <input type="text" value="1">
                    <img class="minus-img" src="images/减.png" alt="">
                </div>

                <div class="expense">
                    <p>¥1699.00</p>
                </div>

                <div class="operate">
                    <div class="shift-in">
                        移入收藏夹
                    </div>
                    <div class="del">
                        删除
                    </div>
                </div>
            </div>
            <div class="message-list">
                <input class="list-check" type="checkbox" checked name="commodity">
                <img src="images/位图.png" alt="">
                <div class="message-p">
                    <p class="p1">【设计师合作款】女装 +J 双面呢大衣(外套) 446355</p>
                    <p class="p2">支持30天无理由退换货</p>
                </div>

                <div class="guise">
                    <p>尺码：155/80A/S</p>
                    <p>颜色：69 藏青色</p>
                </div>

                <div class="message-price">
                    <p>¥1699.00</p>
                </div>

                <div class="amount">
                    <img class="plus-img" src="images/加.png" alt="">
                    <input type="text" value="1">
                    <img class="minus-img" src="images/减.png" alt="">
                </div>

                <div class="expense">
                    <p>¥1699.00</p>
                </div>

                <div class="operate">
                    <div class="shift-in">
                        移入收藏夹
                    </div>
                    <div class="del">
                        删除
                    </div>
                </div>
            </div>
            <div class="message-list">
                <input class="list-check" type="checkbox" checked name="commodity">
                <img src="images/位图.png" alt="">
                <div class="message-p">
                    <p class="p1">【设计师合作款】女装 +J 双面呢大衣(外套) 446355</p>
                    <p class="p2">支持30天无理由退换货</p>
                </div>

                <div class="guise">
                    <p>尺码：155/80A/S</p>
                    <p>颜色：69 藏青色</p>
                </div>

                <div class="message-price">
                    <p>¥1699.00</p>
                </div>

                <div class="amount">
                    <img class="plus-img" src="images/加.png" alt="">
                    <input type="text" value="1">
                    <img class="minus-img" src="images/减.png" alt="">
                </div>

                <div class="expense">
                    <p>¥1699.00</p>
                </div>

                <div class="operate">
                    <div class="shift-in">
                        移入收藏夹
                    </div>
                    <div class="del">
                        删除
                    </div>
                </div>
            </div>
            <div class="message-list">
                <input class="list-check" type="checkbox" checked name="commodity">
                <img src="images/位图.png" alt="">
                <div class="message-p">
                    <p class="p1">【设计师合作款】女装 +J 双面呢大衣(外套) 446355</p>
                    <p class="p2">支持30天无理由退换货</p>
                </div>

                <div class="guise">
                    <p>尺码：155/80A/S</p>
                    <p>颜色：69 藏青色</p>
                </div>

                <div class="message-price">
                    <p>¥1699.00</p>
                </div>

                <div class="amount">
                    <img class="plus-img" src="images/加.png" alt="">
                    <input type="text" value="1">
                    <img class="minus-img" src="images/减.png" alt="">
                </div>

                <div class="expense">
                    <p>¥1699.00</p>
                </div>

                <div class="operate">
                    <div class="shift-in">
                        移入收藏夹
                    </div>
                    <div class="del">
                        删除
                    </div>
                </div>
            </div>

            <!-- 底部结算 -->
            <div class="account">
                <input type="checkbox">
                <ul>
                    <li class="li1">全选</li>
                    <li class="li2">删除</li>
                    <li class="li3">移入收藏夹</li>
                    <li class="li4">总价：<span>¥5097.00</span></li>
                    <li class="li5"><img src="images/编组 7.png" alt=""></li>
                </ul>
            </div>

        </div>

    </div>

</body>

</html>